<template>
    <subBox v-loading="loading">
        <breadcrumb :title="'新增数据需求与问题反馈'"></breadcrumb>
        <div class="mt20">
            <div class="add white-block">
                <el-form class="form-common" :model="form" ref="ruleForm" :rules="formRules"
                         size="small" label-width="80px" :label-position="'left'">
                    <el-form-item label="标题：" prop="requirementName">
                        <el-input v-model="form.requirementName" size="small"></el-input>
                    </el-form-item>
                    <el-form-item label="类型">
                        <el-select v-model="type" placeholder="请选择类型">
                            <el-option
                                v-for="item in option"
                                :key="item.value"
                                :label="item.label"
                                :value="item.value">
                            </el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item label="详细说明">
                        <el-input type="textarea" :autosize="{ minRows: 6, maxRows: 6}"
                                  v-model="form.desc"></el-input>
                    </el-form-item>
                    <div class="mt20 btn">
                        <el-button type="primary" size="small" class="vast" @click="submit">提交</el-button>
                        <el-button type="primary" size="small" class="vast" @click="close">取消</el-button>
                    </div>
                </el-form>
            </div>
        </div>
    </subBox>
</template>

<script>
    import subBox from '../../components/layout/layout-sub'
    import breadcrumb from '../../components/breadcrumb'
    import tableExample from '../../components/table'

    export default {
        data() {
            return {
                loading: false,
                form: {
                    requirementName: '',
                    desc: ''
                },
                type: '',
                option: [
                    {
                        value: '',
                        label: '类型'
                    },
                    {
                        value: '1',
                        label: '数据需求'
                    },
                    {
                        value: '2',
                        label: '问题反馈'
                    }
                ],
                formRules: {
                    requirementName: [
                        {required: true, message: '请输入标题', trigger: 'blur'}
                    ]
                }
            }
        },
        mounted() {
        },
        methods: {
            validate(formName, callback) {
                this.$refs[formName].validate((valid) => {
                    if (valid) {
                        if (callback) callback()
                    } else {
                        return false
                    }
                })
            },
            submit() {
                this.validate('ruleForm', () => {
                    this.$http.post('/requirementReply/addRequirement', {
                        requirementName: this.form.requirementName,
                        requirementType: Number(this.type),
                        instructionsDetail: this.form.desc
                    }).then(result => {
                        if (result.success) {
                            this.form = {}
                            this.$emit('upload')
                            this.$method.historyBack()
                        }
                    })
                })
            },
            close() {
                this.form = {}
                // this.$router.back(-1)
                this.$emit('upload')
                this.$method.historyBack()
            }
        },
        components: {
            subBox,
            breadcrumb,
            tableExample
        }
    }
</script>

<style scoped lang="less">
    .add {
        height: 100%;
        padding-left: 200px;

        .el-input {
            width: 20%;
        }

        .el-select {
            width: 20%;
        }

        .el-textarea {
            width: 30%;
        }

        .btn {
            margin-left: 145px;
            margin-top: 50px;
        }
    }
</style>
